<template>
    <div id="app">
        <div class="head"></div>
        <transition :name="transitionName" :mode="mode">
            <keep-alive exclude='privateAlbumRequests,requestedMyPhoto,whoHasAccess'>
                <router-view :class="className"></router-view>
            </keep-alive>
        </transition>
    </div>
</template>
<script>
export default {

    name: 'app',

    data: function() {
        return {
            transitionName: 'slide-left',
            className: 'page child-view child-view-slider',
            mode: ''
        }
    },

    created() {

        let tthis = this;

        if (!Unit.isMobile()) {
            this.$router.push({
                name: 'home'
            });
        }

        window.addEventListener('online', function() {
            let arr = tthis.$children;
            for (let i in arr) {
                if (arr[i].onOnline) {
                    arr[i].onOnline();
                }
            }
        });

        window.addEventListener('offline', function() {
            let arr = tthis.$children;
            for (let i in arr) {
                if (arr[i].onOffline) {
                    arr[i].onOffline();
                }
            }
        });

        //let winScrollFunc = _.throttle(this.winScrollFunc, 500);
        //window.addEventListener('scroll', winScrollFunc);

        //Simulated users
        this.checkSimulatedUser();

        //fixed data
        this.$store.dispatch('requestFxiedOptionsData');
    },

    methods: {

        checkSimulatedUser: function() {
            let gid = Unit.getSessionStorage('sid'),
                rid = this.$route.query.sid,
                sid = rid ? rid : (gid ? gid : null);
            //refresh so get sessionStore
            if (sid) {
                Unit.setSessionStorage('sid', sid);
            }
            // open new window & url/login?sid=dd9a0dac1f2a4683
        },

        winScrollFunc: function() {
            let scrollTop, clientHeight, scrollHeight;
            scrollTop = document.body ? document.body.scrollTop : document.documentElement.scrollTop;
            clientHeight = document.compatMode == "CSS1Compat" ? document.documentElement.clientHeight : document.body.clientHeight;
            scrollHeight = document.body ? document.body.scrollHeight : document.documentElement.scrollHeight;
            if (scrollHeight - (scrollTop + clientHeight) < 80) {
                let arr = tthis.$children;
                for (let i in arr) {
                    if (arr[i].onWinBottomScroll) {
                        arr[i].onWinBottomScroll();
                    }
                }
            }
        },

        transitionAnimations: function(to, from) {

            //console.log(to, from);
            const toDepth = to.path.split('/').length;
            const fromDepth = from.path.split('/').length;
            const fadeArr = ['browse', 'discover', 'me', 'chat', 'connections', 'letsMeet'];

            if (Config.PAGE_INDEX[from.name] < 100) {

                //1
                this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left';

                //2
                if (toDepth == fromDepth) {
                    if (Config.PRE_PAGE & Config.CUR_PAGE) {
                        this.transitionName = Config.PRE_PAGE == to.name ? 'slide-right' : 'slide-left';
                    }
                }

                //3
                if (Config.PAGE_INDEX[to.name] && Config.PAGE_INDEX[from.name]) {
                    var toIndex = Config.PAGE_INDEX[to.name] ? Config.PAGE_INDEX[to.name] : 1,
                        fromIndex = Config.PAGE_INDEX[from.name] ? Config.PAGE_INDEX[from.name] : 1;
                    if (toIndex == fromIndex) {
                        this.transitionName = Config.PRE_PAGE == to.name ? 'slide-right' : 'slide-left';
                    } else {
                        this.transitionName = toIndex < fromIndex ? 'slide-right' : 'slide-left';
                    }
                }


                if (fadeArr.indexOf(to.name) !== -1 && fadeArr.indexOf(from.name) !== -1) {
                    this.transitionName = 'fade';
                }

                /*
                if (to.name == 'filter') {
                    this.transitionName = 'slide-to-up'
                } else if (from.name == 'filter') {
                    this.transitionName = 'slide-to-down'
                }
                */

                //last
                if (this.transitionName == 'fade') {
                    this.className = 'page child-view child-view-fade';
                    this.mode = '';
                } else if (this.transitionName == 'slide-right' || this.transitionName == 'slide-left') {
                    this.className = 'page child-view child-view-slider';
                    this.mode = '';
                } else if (this.transitionName == 'slide-to-up' || this.transitionName == 'slide-to-down') {
                    this.className = 'page child-view child-view-upordown';
                    this.mode = '';
                } else {
                    this.className = 'page child-view child-view-fade';
                    this.mode = '';
                }

                Config.PRE_PAGE = from.name;
                Config.CUR_PAGE = to.name;

            }
        }
    },

    watch: {
        '$route' (to, from) {
            this.transitionAnimations(to, from);
        }
    }

}

</script>
